<html>
<head>
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <link href="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>
    <link href="${ctx}/select2/4.0.6-rc.1/css/select2.min.css" rel="stylesheet">
    <script src="${ctx}/layui/layui.all.js"></script>
    <script src="${ctx}/js/util.js"></script>
    <link href="${ctx}/layui/css/layui.css" rel="stylesheet">
    <style scoped>
        .btn {
            font-size: 12px;
        }

        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }

        .select-editable {
            position: relative;
            background-color: white;
            border: solid grey 1px;
            width: 120px;
            height: 18px;
        }

        .select-editable select {
            position: absolute;
            top: 0px;
            left: 0px;
            font-size: 14px;
            border: none;
            width: 120px;
            margin: 0;
        }

        .select-editable input {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            padding: 1px;
            font-size: 12px;
            border: none;
        }

        .select-editable select:focus, .select-editable input:focus {
            outline: none;
        }

        .fixed-table-toolbar .bs-bars {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="modal fade" id="loadingModal">
    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
        <div class="progress progress-striped active" style="margin-bottom: 0;">
            <div class="progress-bar" style="width: 100%;"></div>
        </div>
        <font color="black" size="10">正在审核中请耐心等待...</font>
    </div>
</div>

<div class="container-fluid">

    <div id="toolbar">
        <div style="display: table;width: 100%;margin-bottom: 10px">
            <div class="input-group" style="float: left; width: 200px; margin:0 15px 10px 0;">
                <span class="input-group-addon">手机号码</span>
                <input type="text" class="form-control" id="phone">
            </div>
            <div class="input-group" style="float: left; width: 200px; margin:0 15px 10px 0;">
                <span class="input-group-addon">任务名称</span>
                <input type="text" class="form-control" id="title" value="<#if _title??>${_title}</#if>">
            </div>
            <div class="input-group" style="float: left; width: 200px; margin:0 15px 10px 0;">
                <span class="input-group-addon">客户姓名</span>
                <input type="text" class="form-control" id="customer">
            </div>
            <div class="input-group" style="float: left; max-width: 380px; margin-bottom:10px;">
                <span class="input-group-addon">创建时间</span>
                <input type="date" class="form-control"
                       style="position:relative; float:left; width:140px;border-right: none" id="startTime">
                <input type="date" class="form-control" style="position:relative; float:left; width:140px" id="endTime">
            </div>
            <div class="input-group" style="float: left; max-width: 200px; margin:0 15px 10px 0;">
                <span class="input-group-addon">任务状态</span>
                <select id="status" class="form-control" style="">
                    <option value="">全部</option>
                    <#list taskStatus as status>
                        <option value="${status}" <#if status=='WaitCheckout'>selected</#if>>${status.title}</option>
                    </#list>
                </select>
            </div>
            <div class="btn-group">
                <button id="search_btn" class="btn btn-info">立即查询</button>
            </div>
        </div>
        <div style="width: 100%;">
            <button id="check_success_list" type="button" class="btn btn-success">批量审核成功</button>
            <button id="check_fail_list" type="button" class="btn btn-danger">批量审核失败</button>
            <button id="shifang" type="button" class="btn btn-danger">批量释放</button>
            <h6 style="color:red;display:inline;">注意:批量操作只能操作金额小于2元的任务和任务处于待审核的状态</h6>
        </div>
    </div>
    <table id="table"></table>
</div>

<div id="myModal" class="modal fade bs-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">通用任务审核</h4>
            </div>
            <div class="modal-body">
                <div style="text-align:center;">
                    提交时间: <span id="modifyTime"></span> &nbsp;&nbsp;&nbsp;&nbsp; 用户: <span id="username"></span> &nbsp;&nbsp;&nbsp;&nbsp;
                    任务：<span id="taskTitle"></span>
                    <br/>
                </div>
                <div style="text-align:center; padding-top: 10px;">
                    <div class="col-md-12 " id="imagesContainer">

                    </div>
                    <div class="col-md-12 " id="inputContainer">

                    </div>
                    <div style="clear:both;">
                        <br/>
                    </div>
                    <div style="padding: 15px; text-align:left;">
                        <select id="select2" style="width:300px; ">
                            <option value="截图不合规定">截图不合规定</option>
                            <option value="未按要求完成任务">未按要求完成任务</option>
                            <option value="未按关键字搜索!">未按关键字搜索!</option>
                            <option value="未按指定应用市场搜索!">未按指定应用市场搜索!</option>
                        </select>
                    </div>
                    <div style="clear:both;">
                    </div>
                    <div class="modal-footer">
                        <button id="success_btn" type="button" class="btn btn-success">成功（A）</button>
                        <button id="fail_btn" type="button" class="btn btn-warning">失败（D）</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


        <script src="${ctx}/bootstrap-table/1.12.0/locale/bootstrap-table-zh-CN.min.js"></script>
        <script src="${ctx}/bootstrap-table/1.12.0/extensions/export/bootstrap-table-export.min.js"></script>
        <script src="${ctx}/select2/4.0.6-rc.1/js/select2.min.js"></script>
        <script src="${ctx}/js/extends.js"></script>
        <script>

            var hasOpend = false;
            var v_index = -1;

            function openModal(index, memberId, taskid, times, phone, title) {
                v_index = index;
                $.ajax({
                    url: '/sys/comments/detail',
                    data: {
                        memberid: memberId,
                        taskid: taskid
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        //	console.log(res)
                        //$("#remark").text("截图不合规定");
                        $("#imagesContainer").html("");
                        var array = JSON.parse(res.result);
                        array = eval(array);
                        for (var i = 0; i < array.length; i++) {
                            //console.log(array)
                            if (array[i].type == 'image') {
                                $("#inputContainer").empty();
                                var div = $("<div>").addClass("col-md-4 ");
                                var img = $("<img>").attr("src", array[i].resultImage.image).css({
                                    'width': '100%',
                                    'height': 'auto'
                                });
                                var p = $("<p>").css("text-align", "center").text("步骤" + (i + 1));
                                div.append(img).append(p);
                                $("#imagesContainer").append(div);
                            } else {
                                $("#inputContainer").empty();
                                var div = $("<div>").addClass("col-md-12");
                                div.append("步骤" + (i + 1) + ":" + array[i].resultInput);
                                $("#inputContainer").append(div);
                            }
                        }
                        $("#submitTime").text(times);
                        $("#username").text(phone);
                        $("#taskTitle").text(title);
                        $("#success_btn").attr("data-id", memberId);
                        $("#success_btn").attr("data-task", taskid);
                        $("#fail_btn").attr("data-id", memberId);
                        $("#fail_btn").attr("data-task", taskid);
                        $('#myModal').modal('show');

                        $.fn.modal.Constructor.prototype.enforceFocus = function () {
                        };

                        $('#select2').select2({
                            tags: true
                        });

                        hasOpend = true;
                    },
                    error: function () {
                        alert('网络异常1！');
                    }
                });
            }

            function openModal2(index, memberId, taskid, times, phone, title) {
                $("#success_btn").show();
                $("#fail_btn").show();
                v_index = index;
                $.ajax({
                    url: '/sys/comments/detail',
                    data: {
                        memberid: memberId,
                        taskid: taskid
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        //$("#remark").text("截图不合规定");
                        $("#imagesContainer").html("");
                        var array = JSON.parse(res.result);
                        for (var i = 0; i < array.length; i++) {
                            if (array[i].type == 'image') {
                                $("#inputContainer").empty();
                                var div = $("<div>").addClass("col-md-4");
                                var img = $("<img>").attr("src", array[i].resultImage.image).css({
                                    'width': '100%',
                                    'height': 'auto'
                                });
                                var p = $("<p>").css("text-align", "center").text("步骤" + (i + 1));
                                div.append(img).append(p);
                                $("#imagesContainer").append(div);
                            } else {
                                $("#inputContainer").empty();
                                var div = $("<div>").addClass("col-md-12");
                                div.append("步骤" + (i + 1) + ":" + array[i].resultInput);
                                $("#inputContainer").append(div);
                            }
                        }
                        $("#submitTime").text(times);
                        $("#username").text(phone);
                        $("#taskTitle").text(title);
                        $("#success_btn").attr("data-id", memberId);
                        $("#success_btn").attr("data-task", taskid);
                        $("#fail_btn").attr("data-id", memberId);
                        $("#fail_btn").attr("data-task", taskid);
                        if (res.status != 'WaitCheckout') {
                            $("#success_btn").hide();
                            $("#fail_btn").hide();
                        }
                    },
                    error: function () {
                        alert('网络异常2！');
                    }
                });
            }

            function queryParams(opt) {
                opt.title = $("#title").val();
                opt.phone = $("#phone").val();
                opt.stime = $("#startTime").val();
                opt.etime = $("#endTime").val();
                opt.status = $("#status").val();
                opt.customer = $("#customer").val();
                console.log($("#endTime").val());
                return opt;
            };

            var table = null;

            $(function () {
                table = $('#table');
                //加载表格
                table.bootstrapTable({
                    url: '/sys/comments/checkList', //请求后台的URL（*）
                    method: 'post', //请求方式（*）
                    toolbar: '#toolbar', //工具按钮用哪个容器
                    striped: true,
                    dataType: "json",
                    pagination: true,
                    // "queryParamsType": "limit",
                    singleSelect: false,
                    contentType: "application/x-www-form-urlencoded",
                    pageSize: 10,
                    pageNumber: 1,
                    search: false, //不显示 搜索框
                    showColumns: false, //不显示下拉框（选择显示的列）
                    sidePagination: "server", //服务端请求
                    queryParams: queryParams,
                    //minimunCountColumns: 2,
                    pageList: [10, 100, 200, 500], //可供选择的每页的行数（*）
                    //queryParams : oTableInit.queryParams,//传递参数（*）
                    searchOnEnterKey: true,
                    // search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    strictSearch: true,
                    //showColumns: true, //是否显示所有的列
                    showRefresh: false, //是否显示刷新按钮
                    minimumCountColumns: 2, //最少允许的列数
                    clickToSelect: true, //是否启用点击选中行
                    height: (document.body.clientHeight), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "userId", //每一行的唯一标识，一般为主键列
                    // showToggle: true, //是否显示详细视图和列表视图的切换按钮
                    // cardView: false, //是否显示详细视图
                    // detailView: false, //是否显示父子表
                    // showExport: true, //是否显示导出
                    exportDataType: "selected", //basic', 'all', 'selected'
                    columns: [{
                        checkbox: true
                    }, {
                        field: 'id',
                        title: 'id',
                        width: '50px'
                    }, {
                        title: '金额',
                        field: 'worth',
                        width: '50px',
                        formatter: function (value, row, index) {
                            if (row.worth != null) {
                                return row.worth / 100 + '元';
                            } else {
                                return '';
                            }

                        }
                    }, {
                        field: 'phone',
                        title: '用户号码',
                        width: '100px',
                        formatter: function (value, row, index) {
                            var str = "";
                            if (row.hurry_time != null) {
                                str = "<div style='color: red'>" + "已催审" + new Date(row.hurry_time).format("yyyy-MM-dd HH:mm:ss") + "</div>"
                            }
                            return row.phone + str;
                        }
                    }, {
                        field: 'createTime',
                        title: '领取时间',
                        width: '125px',
                        formatter: function (value, row, index) {
                            return new Date(value).format("yyyy-MM-dd HH:mm:ss");
                        }
                    }, {
                        field: 'submitTime',
                        title: '任务提交时间',
                        width: '125px',
                        formatter: function (value, row, index) {
                            return new Date(value).format("yyyy-MM-dd HH:mm:ss");
                        }
                    }, {
                        field: 'sex',
                        title: '防作弊',
                        width: '125px',
                        formatter: function (value, row, index) {
                            var str = "正常";
                            switch (value) {
                                case 0:
                                    str = "图片IMEI为空";
                                    break;
                                case 1:
                                    str = "IMEI与本机不匹配";
                                    break;
                                case 2:
                                    str = "正常";
                                    break;
                                default:
                                    break;
                            }
                            return str;
                            return new Date(value).format("yyyy-MM-dd HH:mm:ss");
                        }
                    }, {
                        field: 'title',
                        title: '应用名称',
                        width: '125px'
                    }, {
                        field: 'result',
                        title: '审核内容',
                        formatter: function (value, row, index) {
                            if (value == "") {
                                return "";
                            }
                            //var json = JSON.stringify(value);//转换成字符串
                            var array = JSON.parse(value);//转换成object  //value是字符串
                            //console.log(array);
                            array = eval(array);

                            var src = "";
                            for (var i = 0; i < array.length; i++) {
                                if (array[i].type == "image") {
                                    src += "<img style='width: 24%; height: auto; margin-right: 1%; border: 1px solid #ccc;' src='" + array[i].resultImage.image + "' />";
                                } else {
                                    continue;
                                }
                            }
                            return src;
                        }
                    }, {
                        field: 'status',
                        title: '审核状态',
                        width: '100px',
                        formatter: function (value, row, index) {
                            if (value == 'WaitCheckout') {
                                return '待审核';
                            } else if (value == 'CheckSuccess') {
                                return '审核成功';
                            } else if (value == 'CheckFailure') {
                                return '审核失败';
                            }
                        }
                    }, {
                        field: 'uuid',
                        title: '操作',
                        width: '80px',
                        formatter: function (value, row, index) {
                            var times = new Date(row.modifyTime).format("yyyy-MM-dd HH:mm:ss");
                            //console.log(times);
                            // var btns = '<a class="check_btn" href="javascript:void(0);" onClick="openModal('+ row.memberId + ',' + row.taskId +')">审核</a>';
                            var btns = '<a class="check_btn" href="javascript:void(0);" onClick="openModal(' + index + ',\'' + row.memberId + '\',\'' + row.taskId + '\',\'' + times + '\',\'' + row.phone + '\',\'' + row.title + '\')">审核</a>';
                            return btns;
                        }
                    }],
                    responseHandler: function (res) {
                        return {
                            "total": res.total, //总页数
                            "rows": res.rows //数据
                        };
                    }
                });

                // 查询
                $("#search_btn").click(function () {
                    table.bootstrapTable('refreshOptions', {pageNumber: 1});
                });

                $("#success_btn").click(function () {
                    var memberid = $(this).attr("data-id");
                    var taskid = $(this).attr("data-task");
                    if (confirm("审核通过？")) {
                        $.post("/sys/comments/check", {
                            status: '任务成功',
                            memberid: memberid,
                            taskid: taskid
                        }, function (res) {
                            $("#fail_btn").hide();
                            $("#success_btn").hide();
                            table.bootstrapTable('refresh');
                            layer.msg(res.message);
                        });
                    }
                });

                $("#fail_btn").click(function () {
                    var memberid = $(this).attr("data-id");
                    var taskid = $(this).attr("data-task");
                    if (confirm("审核失败？")) {
                        $.post("/sys/comments/check", {
                            status: '任务失败',
                            memberid: memberid,
                            taskid: taskid,
                            remark: $('#select2').val()
                        }, function (res) {
                            $("#fail_btn").hide();
                            table.bootstrapTable('refresh');
                            layer.msg(res.message);
                        });
                    }
                });
                $("#shifang").click(function () {
                    var data = table.bootstrapTable('getAllSelections');

                    if (data.length == 0) {
                        layer.msg('未选中数据');
                    } else {
                        var i = new Array();
                        $.each(data, function (index, item) {
                            i.push(item.id);
                        });
                        layer.confirm('批量释放?', {icon: 3, title: '提示'}, function (index) {
                            //do something
                            layer.close(index);
                            $("#loadingModal").modal('show');
                            $.ajax({
                                url: "/sys/comments/release",    //请求的url地址
                                dataType: "json",   //返回格式为json
                                async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                                data: {"data": i.toString()},    //参数值,键值对
                                type: "post",   //请求方式
                                beforeSend: function () {
                                    //请求前的处理
                                },
                                success: function (res) {
                                    $("#loadingModal").modal('hide');
                                    if (res.success) {
                                        layer.msg(res.message, {
                                            icon: 1,
                                            time: 3000,
                                            offset: 't'

                                        }, function () {
                                            //do something
                                        });
                                        table.bootstrapTable('refresh');
                                    } else {
                                        layer.msg(res.message, {
                                            icon: 2,
                                            time: 3000,
                                            offset: 't'

                                        }, function () {
                                            //do something
                                        });
                                    }
                                },
                                complete: function () {
                                    //请求完成的处理
                                },
                                error: function () {
                                    $("#loadingModal").modal('hide');
                                    //请求出错处理
                                    alert("请重试！若在失败请联系管理员")
                                }
                            });

                        });

                    }
                });
                $("#check_success_list").click(function () {
                    var data = table.bootstrapTable('getAllSelections');

                    if (data.length == 0) {
                        layer.msg('未选中数据');
                    } else {
                        var k = 0;
                        var i = new Array();
                        $.each(data, function (index, item) {
                            if ( item.status === ('WaitCheckout')) {
                                i.push(item.id);
                            } else {
                                k++;
                            }

                        });

                        if (i.length == 0) {
                            return;
                        }
                        layer.confirm('批量审核成功?', {icon: 3, title: '提示'}, function (index) {
                            //do something
                            layer.close(index);
                            $("#loadingModal").modal('show');
                            $.ajax({
                                url: "/sys/comments/checkselectlist",    //请求的url地址
                                dataType: "json",   //返回格式为json
                                async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                                data: {"data": i.toString(), "status": '任务成功'},    //参数值,键值对
                                type: "post",   //请求方式
                                beforeSend: function () {
                                    //请求前的处理
                                },
                                success: function (res) {
                                    $("#loadingModal").modal('hide');
                                    if (res.success) {
                                        layer.msg(res.message, {
                                            icon: 1,
                                            time: 3000,
                                            offset: 't'

                                        }, function () {
                                            //do something
                                        });
                                        table.bootstrapTable('refresh');
                                    } else {
                                        layer.msg(res.message, {
                                            icon: 2,
                                            time: 3000,
                                            offset: 't'

                                        }, function () {
                                            //do something
                                        });
                                    }
                                },
                                complete: function () {
                                    //请求完成的处理
                                },
                                error: function () {
                                    $("#loadingModal").modal('hide');
                                    //请求出错处理
                                    alert("请重试！若在失败请联系管理员")
                                }
                            });

                        });

                    }
                });
                $("#check_fail_list").click(function () {
                    var data = table.bootstrapTable('getAllSelections');

                    if (data.length == 0) {
                        layer.msg('未选中数据');
                    } else {
                        var i = new Array();
                        var k = 0;
                        $.each(data, function (index, item) {
                            if ( item.status === ('WaitCheckout')) {
                                i.push(item.id);
                            } else {
                                k++;
                            }

                        });

                        if (i.length == 0) {
                            return;
                        }
                        layer.confirm('批量审核失败?', {icon: 3, title: '提示'}, function (index) {
                            layer.close(index);
                            $("#loadingModal").modal('show');
                            $.ajax({
                                url: "/sys/comments/checkselectlist",    //请求的url地址
                                dataType: "json",   //返回格式为json
                                async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                                data: {"data": i.toString(), "status": '任务失败', "remark": '未按要求完成任务'},    //参数值,键值对
                                type: "post",   //请求方式
                                beforeSend: function () {
                                    //请求前的处理
                                },
                                success: function (res) {
                                    $("#loadingModal").modal('hide');
                                    if (res.success) {
                                        layer.msg(res.message, {
                                            icon: 1,
                                            time: 3000,
                                            offset: 't'

                                        }, function () {
                                            //do something
                                        });
                                        table.bootstrapTable('refresh');
                                    } else {
                                        layer.msg(res.message, {
                                            icon: 2,
                                            time: 3000,
                                            offset: 't'

                                        }, function () {
                                            //do something
                                        });
                                    }
                                },
                                complete: function () {
                                    //请求完成的处理
                                },
                                error: function () {
                                    $("#loadingModal").modal('hide');
                                    //请求出错处理
                                    alert("请重试！若在失败请联系管理员")
                                }
                            });

                        });

                    }
                });

                $('#myModal').on('hidden.bs.modal', function (e) {
                    hasOpend = false;
                    _index = -1;
                });

                $("body").on("keyup", function (e) {
                    if (!hasOpend) {
                        return;
                    }
                    if (e.keyCode == 65) {
                        $("#success_btn").click();
                    } else if (e.keyCode == 68) {
                        $("#fail_btn").click();
                    } else if (e.keyCode == 37) {
                        v_index--;
                        if (v_index <= -1) {
                            return;
                        }
                        table.bootstrapTable('uncheckAll');
                        try {
                            table.bootstrapTable('check', v_index);
                            var row = table.bootstrapTable('getSelections')[0];
                            var times = new Date(row.modifyTime).format("yyyy-MM-dd HH:mm:ss");
                            openModal2(v_index, row.memberId, row.taskId, times, row.phone, row.title);
                        } catch (exception) {
                            v_index++;
                        }
                    } else if (e.keyCode == 39) {
                        v_index++;
                        table.bootstrapTable('uncheckAll');
                        try {
                            table.bootstrapTable('check', v_index);
                            var row = table.bootstrapTable('getSelections')[0];
                            var times = new Date(row.modifyTime).format("yyyy-MM-dd HH:mm:ss");
                            openModal2(v_index, row.memberId, row.taskId, times, row.phone, row.title);
                        } catch (exception) {
                            v_index--;
                        }
                    }
                });

            });

            // 编辑
            /*var edit = function(memberid, taskid) {
                window.parent.iw.dialog({
                    size: 'lg',
                    title: '审核任务',
                    href: '/comments/check/' + memberid + '/' + taskid,
                    closing: function() {
                        table.bootstrapTable('refresh');
                    }
                });
            };*/

        </script>

</body>

</html>
